Vue.component("my-head",{
    template:`
    <nav id="nav">
        <ul v-if="account===''">
            <li><a href="index.html">首页</a></li>
            <li><a href="personal.html?target=1">我的点赞</a></li>
            <li><a href="personal.html?target=2">我的收藏</a></li>
            <li><a href="personal.html?target=3">我的浏览记录</a></li>
            <li><a href="personal.html?target=4">我的发布</a></li>
            <li><a href="personal.html?target=5">我的评论</a></li>
            <li><a href="personal.html?target=6">我的提问</a></li>
        </ul>
        <ul v-else>
            <li><a href="index.html">首页</a></li>
            <li><a :href="'personal.html?target=1&'+ account">我的点赞</a></li>
            <li><a :href="'personal.html?target=2&'+ account">我的收藏</a></li>
            <li><a :href="'personal.html?target=3&'+ account">我的浏览记录</a></li>
            <li><a :href="'personal.html?target=4&'+ account">我的发布</a></li>
            <li><a :href="'personal.html?target=5&'+ account">我的评论</a></li>
            <li><a :href="'personal.html?target=6&'+ account">我的提问</a></li>
        </ul>
    </nav>
    `,
    data(){
        return{
            account:''
        }
    },
    created(){
        var url = window.location.href;
        var regPos1 = /account=\d+/;
        //取出account参数
        if (regPos1.test(url)) {
            this.account = url.match(regPos1);
            console.info(this.account);
        }
    }
})

Vue.component("my-card",{
    template:`
  <div class="info">
        <figure>
            <img src="images/art.jpg" alt="秋。。。相知">
            <figcaption>
             {{user.signature}}
             </figcaption>
        </figure>
        <div class="card">
           <h1>
                <span style="text-align: left">我的名片</span>  
                <span v-if="account==''" STYLE="text-align: right;font-size: 10px">
                    <a href="Modify.html">修改信息</a></span>
           </h1>
              <p>账号：{{user.account}}</p>
              <p>昵称：{{user.nickname}}</p>
              <p>账号等级：{{user.level}}</p>
              <p>性别：{{user.sex}}</p>
              <p>年龄：{{user.age}}</p>
              <p>积分：{{user.integral}}</p>
              <p>邮箱：{{user.email}}</p>
        </div>
    </div>
    `,
    data(){
        return{
            user:[],
            account:''
        }
    },
    created(){
        var url = window.location.href;
        var regPos1 = /account=\d+/;
        //取出account参数
        if (regPos1.test(url)) {
            this.account = url.match(regPos1);
            console.info(this.account);
        }
        var url1="QueryUser.s";
        if(this.account!=''){
            url1+="?";
            url1+=this.account;
        }
        axios.get(url1).then(res=>{
            this.user=res.data;
            console.info(this.user);
        })
    }
})

Vue.component("my-box",{
    template:`
    <div class="blogs">
        <ul class="bloglist">
            <li>
                <div class="row_box" v-for="(l,index) in list">
                    <div class="ci"></div><!--圆形-->
                    <h2 class="title"> 
                    <a v-if="target!='target=6' && target!='target=5'" :href="'read.html?postId='+ l.id">{{l.title}}</a>
                    <a v-else-if="target=='target=5'" :href="'read.html?postId='+ l.postid">点击进入该帖子</a>
                    <!--TODO-->
                    <a v-else :href="'readProblem.html?problemId='+ l.id">{{l.title}}</a>
                    </h2>
                    <ul class="textinfo">
                        <img v-if="target!='target=6' && target!='target=5'" :src="l.img">
                        -------------------------------------------------------
                        <p style="color: white">{{newbody[index].text}}</p>
                    </ul>
                    <ul class="details">
                        <li class="icon_time"><a href="#">{{l.begintime}}</a></li>
                    </ul>
                </div>
                                <el-pagination background
            layout="prev, pager, next"
            :total="total"
             @current-change="query"
            :page-size="10">
    </el-pagination>
            </li>
        </ul>
    </div>
    `,
    data(){
        return{
            target:'',
            user:[],
            list:[],
            total:'',
            account:'',
            newbody:"",
        }
    },
    created(){
        this.Initialize();
        this.query();
    },
    methods: {
        Initialize() {
            var url = window.location.href;
            //判断是否有该参数
            var regPos = /target=\d+/;
            //取出account参数
            if (regPos.test(url)) {
                this.target = url.match(regPos);
                console.info(this.target);
            }
            var regPos1 = /account=\d+/;
            //取出account参数
            if (regPos1.test(url)) {
                this.account = url.match(regPos1);
                console.info(this.account);
            }
        },
        // 一次查10条
        query(page){
            target=this.target || "target=1";
            page=page || 1;
            let url="QueryPersonal.s?";
            url+=target;
            console.info(url);
            if(this.account!=''){
                url+="&";
                url+=this.account;
            }
            url+="&size=10&page="+page;
            axios.get(url).then(res=>{
                this.newbody=res.data.newbody;
                console.log("this.newbody=",this.newbody)
                this.list=res.data.queryList;
                this.total=res.data.total;
                console.info(this.total);
                console.info(this.list);
                console.info(this.target)
            })
        }
    }
})
